import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import type { ProColumns, ActionType } from "@ant-design/pro-table";
import React, { useEffect, useState, useRef } from "react";
import { Card, Tabs, Row, Statistic, Col, Descriptions, Image } from "antd";
import { DynamicFormItem } from "@/components/DynamicForm";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const actionRef = useRef<ActionType>();

	const classList = [
		{ label: "抽奖奖品", value: 10 },
		{ label: "推广必得奖品", value: 20 },
	];
	//切换tabBar项
	const [tabType, setTabType] = useState<any>("1");
	// 表格项
	const columns: ProColumns[] = [
		{
			title: "商品ID",
			dataIndex: "rewardCode",
		},
		{
			title: "商品名称",
			dataIndex: "rewardName",
		},
		{
			title: "商品类型",
			dataIndex: "rewardType",
			valueEnum: {
				20: "推广必得奖品",
				10: "抽奖奖品",
			},
		},
		{
			title: "商品图片",
			dataIndex: "rewardIcon",
			search: false,
			render: (_, record: any) => {
				if (record.rewardIcon) {
					return (
						<Image.PreviewGroup>
							<Image src={record.rewardIcon} width={50} alt="" />
						</Image.PreviewGroup>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "商品描述",
			dataIndex: "rewardDesc",
			search: false,
		},
		{
			title: "商品价格",
			dataIndex: "rewardMoney",
			search: false,
		},
		{
			title: "商品库存",
			dataIndex: "rewardMaxNum",
			search: false,
		},
	];

	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "商品名称",
				name: "rewardName",
				required: true,
			},
			{
				type: "select",
				label: "商品类型",
				name: "rewardType",
				options: classList,
				required: true,
			},
			{
				type: "upload",
				label: "商品图片",
				name: "rewardIcon",
				required: true,
				fieldProps: {
					limit: 1,
				},
			},
			{
				type: "text",
				label: "商品描述",
				name: "rewardDesc",
				required: true,
			},
			{
				type: "text",
				label: "商品价格",
				name: "rewardMoney",
				required: true,
			},
			{
				type: "text",
				label: "商品库存",
				name: "rewardMaxNum",
				required: true,
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "rewardCode",
		scroll: { x: 1000 },
		columns,
		actionRef,
		listProps: {
			url: "/base-reward-info/base-reward-page-list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/base-reward-info/insert-reward",
			method: "POST",
			requestType: "params",
			paramsHandle: (params: any) => {
				params.rewardIcon = (
					params?.rewardIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
			modalProps: {
				formProps: {
					labelCol: { span: 6 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
		},
		updateProps: {
			url: "/base-reward-info/update-reward",
			method: "POST",
			requestType: "params",
			paramsHandle: ({ ...params }: any, record: any) => {
				params.rewardIcon = (
					params?.rewardIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
			modalProps: {
				formValuesHandle: async (record: any) => {
					const { ...others } = record;
					return {
						...others,
						rewardIcon: others?.rewardIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: others.rewardIcon,
										url: others.rewardIcon,
									},
							  ]
							: [],
					};
				},

				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
			},
		},
		handleOperating: (items: any[]) => [
			{
				type: "modal",
				props: {
					btnText: "预览",
					modalProps: {
						width: 1200,
						footer: false,
						title: "商品详情",
						content: {
							render: (vm: any, getModalRef: any) => {
								let result = vm.state.record;
								return (
									<div>
										<Descriptions>
											<Descriptions.Item label="商品编号">
												{result.rewardCode}
											</Descriptions.Item>
											<Descriptions.Item label="商品名称">
												{result.rewardName}
											</Descriptions.Item>
											<Descriptions.Item label="商品类型">
												{result.rewardType == 10 ? "抽奖奖品" : "推广必得奖品"}
											</Descriptions.Item>

											<Descriptions.Item label="商品描述">
												{result.rewardDesc}
											</Descriptions.Item>
											<Descriptions.Item label="商品价格">
												{result.rewardMoney}
											</Descriptions.Item>
											<Descriptions.Item label="商品库存">
												{result.rewardMaxNum}
											</Descriptions.Item>
											<Descriptions.Item label="商品图片">
												{
													<Image.PreviewGroup>
														<Image
															src={result.rewardIcon}
															style={{ padding: 8 }}
															width={50}
															alt=""
														/>
													</Image.PreviewGroup>
												}
											</Descriptions.Item>
										</Descriptions>
									</div>
								);
							},
						},
					},
				},
			},
			...items,
		],
	};

	// 初始化加载数据
	useEffect(() => {
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
